<template>
  <div class="begin">
    <div @click.stop.prevent="openGiveThird" class="givethird">
      <img src="../assets/images/giveThird.png" width="30" height="56">
      <p>托管</p>
    </div>
    <div class="title">累计采矿时间：{{uploadTotleTome || totleTime}}</div>
    <div class="title" style="margin-top: 20px;">累计BKC：{{loopData.bites || deviceBikeTotal || 0}}</div>
    <div class="title" style="margin-top: 20px;">设备编号：No.{{deviceNum}}</div>
    <div class="ball">
      <img src="../assets/images/ball.png" width="450" height="450">
    </div>
    <div v-show="!isWorking" class="stutas">等待挖矿…</div>
    <div v-show="isWorking" class="stutas">
      <p style="position: relative; z-index: 9;">正在挖矿中{{progress.toFixed(2)}}%…</p>
      <x-progress :percent="progress" :show-cancel="false"></x-progress>
    </div>
    <div v-show="!isWorking" @click.stop.prevent="firstGetData"
      class="begin-box">
      <button>开始挖矿</button>
    </div>
    <div v-show="isWorking" @click.stop.prevent="stop"
      class="begin-box">
      <button>停止挖矿</button>
    </div>
    <p @click.stop.prevent="openChangePage" class="change">修改钱包地址</p>
  </div>
</template>

<script>
import { request } from '@/utils/request'
import { openWebview, preLoad, showWebviewById } from '@/utils/webview'
import { XProgress } from 'vux'
import { formatSeconds } from '@/utils/envent'
import anime from 'animejs'

export default {
  components: {
    XProgress
  },
  props: [
    'deviceId',
    'deviceBikeTotal',
    'userEmail',
    'userAddress',
    'giveThirdEmail',
    'giveThirdAddress',
    'deviceNum',
    'totleTime'
    // 'checkTime'
  ],
  data() {
    return {
      begin: null,
      isWorking: false, // 是否在挖矿,
      uploadTotleTome: 0,
      loopData: {},
      loopDataTimer: null,
      progress: 0,
      progressTimer: null,
      progressCount: 0,
      checkTime: ''
    }
  },
  created() {
    // 预加载一些窗口
    setTimeout(() => {
      preLoad([
        {
          url: './changeAddress.index.html',
          id: 'changeAddress.index',
          title: '修改钱包地址',
          extras: {
            email: this.userEmail,
            address: this.userAddress,
            deviceId: this.deviceId
          }
        },
        {
          url: './giveThird.index.html',
          id: 'giveThird.index',
          title: '托管钱包地址',
          extras: {
            email: this.giveThirdEmail,
            address: this.giveThirdAddress,
            deviceId: this.deviceId
          }
        }
      ])
    }, 1000)
  },
  methods: {
    // easeInOutSine easeInBack
    // 开始挖矿
    firstGetData() {
      request({
        method: 'post',
        url: DOUBANAPI + '/startDig',
        data: {
          device_id: this.deviceId
        }
      })
        .then(res => {
          console.log('first', res)
          this.loopData = res.data
          this.isWorking = true
          this.checkTime = res.data.dig_total_time
          this.uploadProgress()
          this.check()
        })
        .catch(err => {
          this.uploadProgress()
          this.check()
        })
      this.begin = anime({
        targets: '.ball',
        rotate: 360,
        duration: 20000,
        delay: 0,
        loop: true,
        easing: 'linear',
        round: true
      })
    },
    // 挖到矿
    loopGetData() {
      request({
        method: 'post',
        url: DOUBANAPI + '/DigBKC',
        data: {
          device_id: this.deviceId
        }
      })
        .then(res => {
          console.log('loop', res)
          this.loopData = res.data
          this.uploadTotleTome = formatSeconds(res.data.accumulative_time)
          this.isWorking = true
          clearTimeout(this.loopDataTimer)
          this.loopDataTimer = null
          this.firstGetData()
          plus.nativeUI.toast('挖矿成功')
        })
        .catch(err => {
          console.log('断网', err)
          plus.nativeUI.toast('挖矿失败')
          this.begin = anime.remove('.ball')
          // this.isWorking = false
          this.clear()
          clearTimeout(this.loopDataTimer)
          this.loopDataTimer = null
          this.firstGetData()
        })
    },
    // 停止挖矿
    stop() {
      request({
        method: 'post',
        url: DOUBANAPI + '/endDig',
        data: {
          device_id: this.deviceId
        }
      })
        .then(res => {
          console.log('stop', res)
          this.begin = anime.remove('.ball')
          this.isWorking = false
          this.clear()
          clearTimeout(this.loopDataTimer)
          this.loopDataTimer = null
          this.checkTime = res.data.dig_total_time
        })
        .catch(err => {
          plus.nativeUI.toast(err.error)
          this.begin = anime.remove('.ball')
          this.clear()
          clearTimeout(this.loopDataTimer)
          this.loopDataTimer = null
        })
    },
    // 打开修改钱包地址
    openChangePage() {
      // this.$emit('openChangePage')
      showWebviewById('changeAddress.index')
      // openWebview(
      //   {
      //     url: './changeAddress.index.html',
      //     id: 'changeAddress.index'
      //   },
      //   {
      //     bounce: 'none'
      //   },
      //   {
      //     address: this.address,
      //     giveThirdAddress: this.giveThirdAddress,
      //     deviceId: this.deviceId
      //   }
      // )
    },
    // 打开托管
    openGiveThird() {
      showWebviewById('giveThird.index')
      // openWebview(
      //   {
      //     url: './giveThird.index.html',
      //     id: 'giveThird.index'
      //   },
      //   {
      //     bounce: 'none'
      //   },
      //   {
      //     address: this.address,
      //     giveThirdAddress: this.giveThirdAddress,
      //     deviceId: this.deviceId
      //   }
      // )
    },
    // 进度条
    uploadProgress() {
      this.progressTimer = setInterval(() => {
        this.progressCount++
        this.progress = this.progressCount / this.checkTime * 100
      }, 1000)
    },
    // 清楚定时器
    clear() {
      clearInterval(this.progressTimer)
      this.progressTimer = null
      this.progress = 0
      this.progressCount = 0
    },
    // 检测成功
    check() {
      this.loopDataTimer = setTimeout(() => {
        this.loopGetData()
      }, this.checkTime * 1000)
    }
  },
  watch: {
    progressCount(val) {
      if (val >= this.checkTime) this.clear()
    }
  }
}
</script>


<style lang="less">
.begin {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 44px 30px 0 30px;
  background: url('../assets/images/begin.png') no-repeat fixed center/cover;
  color: #fff;
  .givethird {
    position: absolute;
    top: 45px;
    right: 30px;
    width: 40px;
    font-size: 0;
    text-align: center;
    p {
      margin-top: 5px;
      font-size: 19px;
    }
  }
  .title {
    display: flex;
    align-items: center;
    min-width: 300px;
    height: 44px;
    padding-left: 15px;
    background: url('../assets/images/title.png') no-repeat center/cover;
    font-size: 19px;
  }
  .ball {
    margin-top: 30px;
    text-align: center;
  }
  .stutas {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 448px;
    height: 44px;
    padding-left: 25px;
    margin: 50px auto 0;
    background: url('../assets/images/stutas.png') no-repeat center/100%;
    font-size: 19px;
  }
  .begin-box {
    width: 310px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    margin: 40px auto 0;
    button {
      width: inherit;
      height: inherit;
      font-size: 19px;
      border-radius: 22px;
      color: #fff;
      // background: linear-gradient(to right, #f6072f 0%, #f200a1 100%);
    }
  }
  .change {
    height: 27px;
    line-height: 27px;
    text-align: center;
    margin-top: 20px;
    font-size: 19px;
  }
  // 进度条样式
  .weui-progress {
    position: absolute;
    left: 20px;
    right: 20px;
  }

  .weui-progress__bar {
    height: 44px;
    background: transparent;
  }
  .weui-progress__inner-bar {
    height: 44px;
    background: #548689;
    // opacity: 0.4;
  }
}
</style>
